<template>
    <div>
        <breadcrumb></breadcrumb>

        <!-- 列表 -->
        <div class="main">
            <div class="main_head">
                <h3 class="title">车型配置</h3>


                <div class="main_head_right">
                    <div class="selected">
                        已选择<span style="color: #1890ff">{{ selectionLegth }}</span>项
                    </div>
                    <button class="addCargoOwner" @click="$router.push('/BasicSettings/vehicleConfig/edit')">
                        <i class="el-icon-plus iconBtn"></i>
                        <span>新增</span>
                    </button>
                    <el-select class="selector" v-model="operateValue" placeholder="批量操作" size="small"
                        @change="BatchOperation">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="list">
                <el-table :data="records" style="width: 100%" @selection-change="handleSelectionChange" header-align="left"
                    ref="table">
                    <el-table-column align="center" type="selection" width="50"></el-table-column>
                    <el-table-column align="center" prop="SerialNumber" width="60" label="序号">
                        <template slot-scope="scope">
                            <div>{{ scope.$index + 1 + Number(pageSize) * (pageCurrent - 1) }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column align="left" prop="vehiclePic" label="车型照片" width="220">
                        <template slot-scope="scope">
                            <div class="picBox">
                                <el-image class="pic" :src="scope.row.image" :preview-src-list="[scope.row.image]"
                                    :fit="'contain'">
                                </el-image>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column align="left" prop="vehicleConfig" label="车型配置">
                        <template slot-scope="scope">
                            <div class="configBox">
                                <div class="configType">
                                    <div class="title">{{ scope.row.name }}</div>
                                    <div class="tagBox">
                                        <div class="tag" v-for="item in scope.row.energyType" :key="item">
                                            {{ item }}
                                        </div>
                                    </div>


                                </div>
                                <div class="configAttribute">
                                    <div class="configAttribute_Item"
                                        v-if="scope.row.structure != null && scope.row.structure != ''">
                                        货箱类型：{{ scope.row.structure }}</div>
                                    <div class="configAttribute_Item"
                                        v-if="scope.row.modelType != null && scope.row.modelType != ''">
                                        车辆规格：{{ scope.row.modelType }}</div>
                                </div>
                                <div class="configNumber">
                                    <div class="configData_item">
                                        <span class="tit">厢长</span>
                                        <span class="titValue">{{ scope.row.length ? scope.row.length
                                            + '米' : scope.row.truckLength + '米' }}</span>
                                    </div>
                                    <div class="configData_item">
                                        <span class="tit">载方</span>
                                        <span class="titValue">{{ scope.row.capacity ? scope.row.capacity
                                            + '方' : '--.--' }}</span>
                                    </div>
                                    <div class="configData_item">
                                        <span class="tit">载重</span>
                                        <span class="titValue">{{ scope.row.loads ? scope.row.loads + '吨' : '--.--'
                                        }}</span>
                                    </div>
                                    <div class="configData_item">
                                        <span class="tit">车高</span>
                                        <span class="titValue">{{ scope.row.height ? scope.row.height + '米' : '--.--'
                                        }}</span>
                                    </div>
                                </div>

                            </div>
                        </template>

                    </el-table-column>

                    <el-table-column align="left" label="操作" width="153">
                        <template slot-scope="scope">
                            <div>
                                <el-button type="text" size="small"
                                    @click="$router.push({ path: '/BasicSettings/vehicleConfig/edit', query: { categoryId: scope.row.categoryId } })">编辑</el-button>
                                <el-button type="text" size="small"
                                    @click="deleteVehicle(scope.row.categoryId)">删除</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页 -->
            <div class="paginationBox">
                <el-pagination @current-change="changePages($event)" class="pagination" background
                    layout="slot,prev, pager, next" :current-page.sync="pageCurrent" :total="data.total * 1"
                    :page-size="data.size * 1" :pager-count="5">
                    <template slot>
                        <span style="
                  color: #686868;
                  font-size: 12px;
                  margin-right: 20px;
                  display: inline-block;
                ">
                            共{{ data.total }}条,每页{{ data.size }}条
                        </span>
                    </template>
                </el-pagination>
            </div>
        </div>


    </div>
</template>
  
<script>
import breadcrumb from "@/components/breadcrumb";
import httpApi from "@/http";
import basicSettingApi from "@/http/apis/basicSetting";

export default {

    data() {
        return {
            selectionLegth: 0,
            operateValue: "",
            options: [
                {
                    value: "1",
                    label: "批量删除",
                },
            ],
            multipleSelection: [],
            records: [{
                // image: "http://120.46.147.246:7030/test/2023/vehicle_category/xiaomian.png",
                // length: "1.8-2.4",//厢长
                // capacity: "1.7-2.4",//载方
                // loads: "0.5-0.8",//载重
                // height: "1.2-1.5",//车高
                // energyType: "新能源",
                // name: "小面",//类别名称
                // categoryId: "",//类别id
            }],
            data: {},
            pageCurrent: 1,
            pageSize: "10"

        };
    },




    methods: {
        handleSelectionChange(val) {
            this.multipleSelection = val;

            let categoryIdArr = [];
            this.multipleSelection.forEach((item) => {
                categoryIdArr.push(item.categoryId);
            });
            this.multipleSelection = categoryIdArr;
            this.selectionLegth = categoryIdArr.length;
        },
        changePages(val) {
            //页码变化时
            this.pageCurrent = val;
            this.getList();
        },

        getList() {
            let params = {
                current: this.pageCurrent,
                size: this.pageSize
            };
            httpApi.basicSettingApi.getVehicleModelCategoryList(params).then((res) => {
                if (res.data.code == 200) {
                    res.data.data.records.forEach(item => {
                        if (item.energyType != '' && item.energyType != null) {
                            item.energyType = item.energyType.split(',')
                        }
                        if (item.structure != '' && item.structure != null) {
                            item.structure = item.structure.split(',').join('/')  //货箱类型
                        }
                        if (item.modelType != '' && item.modelType != null) {
                            item.modelType = item.modelType.split(',').join('/')   //车辆规格
                        }

                    })

                    this.records = res.data.data.records;
                    this.data = res.data.data;

                }
            })
        },
        deleteVehicle(categoryId) {
            this.$confirm('此操作将永久删除该车型, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                httpApi.basicSettingApi.removeVehicleModel([categoryId]).then(res => {
                    if (res.data.code == 200) {
                        this.getList()
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        BatchOperation(val) {
            // console.log(val);
            if (val == "批量删除") {
                this.$confirm("此操作将批量删除该数据, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        // 发起批量删除请求,
                        if (this.multipleSelection != "") {
                            httpApi.cargoOwnerApi.removeVehicleModel(this.multipleSelection).then((res) => {
                                // console.log("批量删除", res);
                                if (res.data.code == 200) {
                                    this.getList(); //删除后 更新列表数据
                                    this.$message({
                                        type: "success",
                                        message: "批量删除成功!",
                                    });
                                }
                            });
                        } else if (this.multipleSelection == "") {
                            this.$message.warning("请选择删除项");
                        }
                    }).catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除",
                        });
                    });
                this.operateValue = "批量操作"; //重置
            }
        },
        // 记录滚动距离
        scrollEvent(res) {
            this.$route.meta.scrollTop = res.target.scrollTop
        },
    },
    mounted() {
        this.getList()
    },
    activated() {
        //组件激活时监听表格滚动条位置,
        this.$refs.table.bodyWrapper.addEventListener('scroll', this.scrollEvent, false)
        // 激活设置滚动位置
        this.$refs.table.bodyWrapper.scrollTop = this.$route.meta.scrollTop
    },
    beforeRouteLeave(to, from, next) {
        // 为了节省资源，再离开页面的时候关闭对于scroll事件的监听
        this.$refs.table.bodyWrapper.removeEventListener('scroll', this.scrollEvent)
        next()
    },


    components: {
        breadcrumb,
    },
};
</script>
  
<style lang="scss" scoped>
.main {
    width: 100%;
    height: calc(100vh - 127px);
    background-color: #fff;
    padding: 0px 30px 0px 30px;

    .main_head {
        display: flex;
        justify-content: space-between;
        height: 64px;
        align-items: center;

        .title {
            font-size: 16px;
            color: #262626;

        }



        .main_head_right {
            display: flex;
            align-items: center;

            .selected {
                margin-right: 20px;
                font-size: 12px;
            }

            .selector {
                width: 105px;
                height: 32px;
                color: #262626;
                font-size: 12px;
            }

            .addCargoOwner {
                background-color: #1890ff;
                border-radius: 4px;
                height: 32px;
                color: #ffffff;
                font-size: 12px;
                padding: 8px 17px 9px 17px;
                transition: 0.2s;
                cursor: pointer;
                margin-right: 17px;

                .iconBtn {
                    margin-right: 7px;
                    font-size: 12px;
                }

                &:hover {
                    opacity: 0.8;
                }
            }
        }
    }

    .list {
        height: calc(100% - 112px);

        .picBox {
            margin: 0 auto;
            width: 146.4px;
            height: 108.4px;
            border: 1px solid #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;

            .pic {
                height: 55px;
                width: 111px;
            }

        }


        .configBox {
            margin: 0 auto;

            .configType {
                display: flex;
                align-items: center;
                margin-bottom: 12px;

                .title {
                    color: #262626;
                    font-size: 16px;
                    font-weight: bold;
                    margin-right: 16px;

                }

                .tagBox {
                    min-width: 530px;

                    .tag {
                        display: inline-block;
                        color: #1890ff;
                        font-size: 12px;
                        padding: 0 7px;
                        background-color: #ECF5FE;
                        text-align: center;
                        height: 20px;
                        line-height: 20px;
                        margin-right: 10px;
                    }

                }

            }

            .configAttribute {
                margin-bottom: 13px;
                min-width: 554.2px;
                width: 80%;
                display: flex;
                justify-content: space-between;

                .configAttribute_Item {
                    color: #595959;
                    font-size: 12px;
                }

            }

            .configNumber {
                background-color: #F8F7F7;
                height: 58px;
                width: 80%;
                min-width: 554.2px;
                display: flex;
                justify-content: space-between;
                padding: 0 18px;

                .configData_item {
                    height: 58px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;


                    .tit {
                        font-size: 12px;
                        color: #B5B5B5;
                    }

                    .titValue {
                        color: #262626;
                        font-size: 12px;
                    }
                }
            }
        }


        ::v-deep .el-table__body-wrapper {
            height: calc(100vh - 288px);
            overflow-y: scroll;
        }

        // 表头样式
        ::v-deep .el-table__header th {
            background-color: #f0f6fd;
            color: #262626;
            font-size: 12px;
            font-weight: bold;
            text-align: left;
            height: 48px;
            padding: 0;

            // 表 body的td
            ::v-deep .el-table__body td {
                color: #595959;
                font-size: 12px;
            }
        }


    }
}



.paginationBox {
    width: 100%;
    background-color: #fff;
    display: flex;
    height: 48px;
    align-items: center;

    .pagination {
        margin-left: auto;
    }
}
</style>
  